<template>
  <div>
    <el-dialog title="添加员工" :visible.sync="dialogVisible" width="50%" center>

      <div>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">

          <el-row>
            <el-col :span="12">
              <el-form-item label="员工账号" prop="account">
                <el-input v-model="form.account" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工密码" :prop="form.id?'':'password'">
                <el-input v-model="form.password" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="realname">
                <el-input v-model="form.realname" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工电话" prop="phone">
                <el-input v-model="form.phone" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属部门" prop="department_id">
                <el-select v-model="form.department_id" placeholder="请选择所属部门">
                  <el-option v-for="(item,index) in department" :key="index" :label="item.departmentName" :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-cascader v-model="form.department_id" :options="department"
                  :props="{label:'departmentName',children:'child',value:'id'}" @change="handleChange"
                  style="width: 360px;"></el-cascader> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色" prop="role">
                <el-select v-model="form.role	" placeholder="请选择角色">
                  <el-option v-for="(item,index) in role" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>


            </el-col>
          </el-row>


          <el-row>
            <el-col :span="12">
              <el-form-item label="是否冻结">
                <el-radio-group v-model="form.status">
                  <el-radio :label="1">正常</el-radio>
                  <el-radio :label="0">冻结</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>



        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"  :loading="btnloading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    isvalidPhone
  } from '../untils/validate.js';
  import {
    Message
  } from 'element-ui';
  import {
    roleArry
  } from '@/common/arry.js';
  import {
    mapState,
    mapMutations
  } from 'vuex';
  //定义一个全局的变量，谁用谁知道
  var validPhone = (rule, value, callback) => {
    if (!value) {
      callback(new Error('请输入电话号码'))
    } else if (!isvalidPhone(value)) {
      callback(new Error('请输入正确的11位手机号码'))
    } else {
      callback()
    }
  };

  export default {
    watch: {
      dialogVisible: {
        handler(v) {
          if (!v) {
            Object.keys(this.form).forEach(key => (this.form[key] = ''));
            this.form.status=1
          }
        }
      }
    },
    data() {
      return {
        item: {},
        department: this.$store.state.department,
        dialogVisible: false,
        form: {
          id: '',
          account: "",
          password: "",
          realname: "",
          phone: "",
          department_id: "",
          role: "",
          status: 1,
        },
        role: roleArry,
        rules: {
          account: [{
            required: true,
            message: '请输入员工账号',
            trigger: 'blur'
          }, ],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }, ],
          realname: [{
            required: true,
            message: '请输入员工姓名',
            trigger: 'blur'
          }, ],
          department_id: [{
            required: true,
            message: '请选择所属部门',
            trigger: 'blur'
          }],
          role: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            trigger: 'blur',
            validator: validPhone
          }],

        },
        btnloading:false
      }
    },
    created() {
      // this.axios.post("/user/department").then(res => {
      //      this.department=res;
      // }).catch(error => {

      // })

    },
    methods: {
      submitForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post("/user/staffEdit", this.form).then(res => {
              this.btnloading=true;
              Message.success({
                message: "成功",
                duration:1500,
                onClose: (res) => {
                  this.dialogVisible = false;
                  this.btnloading=false
                  this.$emit('update');
                }
              })
            }).catch(error => {
this.btnloading=false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      echo(item) {
        let {
          account,
          departmentId,
          role,
          phone,
          realname,
          status,
          id
        } = item;

        this.form.department_id = Number(departmentId) ;
        this.form.role = role;
        this.form.phone = phone;
        this.form.realname = realname;
        this.form.account = account;
        this.form.id = id;
      }
    }
  }
</script>

<style>
  .el-cascader-menu {
    height: 200px;
  }
</style>
